<!-- Template and UI of the ControlTowerresources -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Control Tower System</title>
        <!-- JS -->
        <!-- library JS -->
        <script src="resources/js/jQueryLib/jquery-1.9.1.js"></script>
        <script src="resources/js/jQueryLib/jquery-ui-1.10.2.custom.js"></script>
        <script src="resources/js/bootstrap.js"></script>
        
        <!-- Control Tower JS -->
        <script src="resources/js/globalfunctions.js"></script>
        <script src="resources/js/control.modules.js"></script>
        <script src="resources/js/gui.js"></script>
        
        
        <!-- CSS -->
        <!-- library CSS -->
        <link href="resources/css/bootstrap.css" rel="stylesheet" media="screen">
        <link href="resources/css/bootstrap-responsive.css" rel="stylesheet" media="screen">
        <link href="resources/css/redmond/jquery-ui-1.10.2.custom.css" rel="stylesheet" media="screen">
        
        <!-- Project CSS -->
        <link href="resources/css/styles.css" rel="stylesheet" media="screen">
        
        <!-- favicon -->
        <link rel="icon" type="image/png" href="resources/img/plane-icon.png">
        
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
    	<!-- title bar -->
        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container">
                    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </a>
                    <a class="brand" href="">
                        <img src="resources/img/plane-icon.png" alt="plane-icon" />
                        Control Tower System
                    </a>
                    <button id="button_add_airport" name="button_add" 
                    		type="button" class="btn btn-primary" >
                    	Add airport
                    </button>
                   		
					<div id="airport_list_select" class="btn-group separator_left">
                      <button class="btn btn-primary" id="btn_selected_airport">Choose an Airport</button>
					  <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
						<span class="caret"></span>
					  </button>
					  <ul class="dropdown-menu">
					  </ul>
					</div>
					
                </div>
            </div>
        </div>
        <!-- airport loader container -->
        <div class="container-fluid" id="airport_container_loader">
       	    <div id="myCarousel" class="carousel slide">
			    <ol class="carousel-indicators">
				    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
				    <li data-target="#myCarousel" data-slide-to="1"></li>
			    </ol>
			    <!-- Carousel items -->
			    <div class="carousel-inner">
				    <div class="active item">
				    	<img alt="image-plane1" src="resources/img/loader1.png">
				    </div>
				    <div class="item">
				    	<img alt="image-plane2" src="resources/img/loader2.png">
				    </div>
			    </div>
			    <!-- Carousel nav -->
			    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
			    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
		    </div>
        </div>
        <!-- airport container -->
        <div class="container-fluid" id="airport_container">
            <div class="row-fluid content_container_header">
                <div class="span12 well well-large center">
                    <div class="alert alert-info">
                        <strong id="arrival_line_title">Airport Radar Arrival Line</strong>
                    </div>
                    <!-- ul used to load the planes from js file -->
                    <ul id="arrivals" class="nav nav-pills"></ul>
                </div>
            </div>
            <div class="row-fluid">
                <div class="span4 well">
                    <div class="alert alert-info center">
                        <img alt="info" src="resources/img/info-icon2.png">
                        <strong>Control Tower</strong>
                    </div>
                    <img id="img_tower" class="img-rounded" alt="tower" src="resources/img/tower.png">
                    <ul id="control_buttons" class="button_list">
                        <li><button id="button_add" name="button_add" type="button" class="btn btn-primary" ><i class="icon-plus icon-white"></i> Add Plane to Radar</button></li>
                        <li><button id="button_remove" name="button_remove" type="button" class="btn btn-danger" ><i class="icon-remove icon-white"></i> Remove Last Plane of Radar</button></li>
                        <li><button id="button_land" name="button_land" type="button" class="btn btn-inverse" ><i class="icon-ok icon-white"></i> Land Plane</button></li>
                        <li><button id="button_park" name="button_park" type="button" class="btn btn-info" ><i class="icon-home icon-white"></i> Park Plane</button></li>
                    </ul>
                </div>
                <div class="span8 well well-large">
                	<div class="alert alert-info center">
                        <img alt="info" src="resources/img/plane-icon2.png">
                        <strong id="airport_name">Test Airport</strong>
                    </div>
                    <!-- Landing field container to load the tracks from js file according to the airport object values -->
                    <div id="landingFieldsContainer"></div> 
                </div>
            </div>
        </div>
        <!-- footer -->
         <div class="container-fluid">
            <div class="row-fluid">
                  <div class="footer center">
                       <span>&COPY; Rights Reserved 2013 </span><br/>
                       <span>Developed by: Otto Abreu, Jonathan Araujo, Esteban Angulo, Denis Knöpfle</span>
                   </div>
              </div>
        </div>
    </body>
</html>
